import React from 'react';
import { useState, useEffect, useDeferredValue } from 'react';
//  useDefferedValue
// 作用: 相当于 js 中的防抖节流, 主要用来做性能优化的, 避免dom的重复渲染, 减少dom 渲染次数
// 副本的变化是当原先的值变化后, 并渲染完才更新副本, 所以副本的更新有延迟, 当如下例子,
// 当更新keyowrds, 由于是输入的keywords 高频变化, 导致keywords 高频变化, 但是由于副本的更新是等
// keywords更新完且渲染完毕, 所以 副本 copykeywords 还没来的及更新呢,keywords 优变化了, 所以只能等到下一次
// 更新副本,最后当keywords 更新完毕, 变成12345, 副本才更新,就被useEffect 钩子监听到变化,触发数组arr 的更新,渲染页面
// 这样导致渲染次数变少了,实现了dom 优化

const Father = () => {
    const [keywords, setKeywordFn] = useState('')
    const [arr, setArr] = useState([])

    const copykeywords = useDeferredValue(keywords)
    // console.log('copykeywords', copykeywords);
    useEffect(() => {
        console.log('执行');
        let list = []
        for (let i = 1; i <= 50000; i++) {
            list.push(String(i))
        }
        const newlist = list.filter(item => item.includes(keywords))
        setArr(newlist)
    }, [copykeywords])
    return (
        <div>
            {/* 输入框 */}
            <p>
                <input type='text' value={keywords} onChange={(e) => {
                    setKeywordFn(e.target.value)
                }} />
            </p>
            {/* 渲染数组 */}
            <ul>
                {
                    arr.map((item, index) => <li key={index}>{item}</li>)
                }
            </ul>
        </div>
    );
}

export default Father;
